<template>
  <a-card class="image-head" :body-style="{ background: 'transparent' }">
    <a-flex :justify="'space-between'">
      <div>
        <a-button @click="clear" type="link">返回</a-button>
      </div>

      <a-flex :gap="8">
        <a-button type="link" v-if="cropperMode === 'view'" @click="cropperMode = 'edit'">
          裁剪
        </a-button>
        <a-popover trigger="click" placement="bottomRight">
          <a-button type="link" ghost>
            <template #icon>
              <SettingOutlined />
            </template>
            设置
          </a-button>
          <template #content>
            <a-card style="width: 300px">
              <a-form :label-col="{ span: 8 }" label-align="left">
                <a-form-item label="裁剪类型">
                  <a-flex :justify="'end'">
                    <a-radio-group v-model:value="cropperProps.stencil" :options="stencilOptions" />
                  </a-flex>
                </a-form-item>
                <a-form-item label="调整大小">
                  <div class="text-right">
                    <a-switch v-model:checked="cropperProps.stencilProps.resizable" />
                  </div>
                </a-form-item>
                <a-form-item label="调整位置">
                  <div class="text-right">
                    <a-switch v-model:checked="cropperProps.stencilProps.movable" />
                  </div>
                </a-form-item>
              </a-form>
            </a-card>
          </template>
        </a-popover>
        <ExportVue />
        <a-button type="primary" @click="saveImage" v-if="props.data.callback">保存</a-button>
      </a-flex>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import { closeWindow } from '@/global/window/window';
import { SettingOutlined } from '@ant-design/icons-vue';
import {
  cropperMode,
  cropperProps,
  cropperRef,
  cropperResult,
  downloadConfig,
} from '../../data/data';
import { stencilOptions } from '../../data/options';
import ExportVue from './Export.vue';
interface Props {
  data: {
    src: string;
    mode: string;
    callback?: (...arg: any) => any;
    stencilSize: any;
  };
  id: string;
}
const props: Props = inject('data')!;
const clear = () => {
  cropperMode.value = 'upload';
};

onUnmounted(() => {
  clear();
});

const saveImage = () => {
  if (cropperResult.value) {
    const { canvas } = cropperRef.value.getResult();
    if (!canvas) return;
    const base64 = canvas.toDataURL(
      `image/${downloadConfig.value.format}`,
      downloadConfig.value.compress,
    );
    props.data.callback && props.data.callback(base64);
    closeWindow(props.id);
  }
};
</script>

<style lang="scss" scoped>
.card {
  box-shadow: none;
  :deep(.ant-card-body) {
    padding: 8px;
  }
}
ul {
  display: grid;
  display: flex;
  flex-wrap: wrap;
  .card-item {
    text-align: center;
  }
}
:deep(.ant-form-item) {
  margin-bottom: 12px;
}
.image-head {
  z-index: 10;
  border-radius: 0;
  background: transparent !important;
  width: 100%;
  &:hover {
    opacity: 1;
  }

  :deep(.ant-card-body) {
    background-color: transparent !important;
  }
}
</style>
